<template>
  <div class="me_form">
    <uni-forms v-if="columns && columns.length" ref="uniForm" :modelValue="params" v-bind="props">
        <template v-for="(item,index) in (columns || [])">
          <uni-forms-item :key="item.key" v-if="!item.show || item.show(params,item)" :label="item.label" :name="item.key" :required="item.rules && item.rules.length ? true : false" :rules="item.rules">
            <template v-if="['easyinput'].includes(item.type)">
              <uni-easyinput v-model="params[item.key]" v-bind="item.props || {}" @input="onChange(item)" />
            </template>
            <template v-else-if="['data-select'].includes(item.type)">
              <uni-data-select v-model="params[item.key]" v-bind="item.props || {}" @change="onChange(item)" />
            </template>
            <template v-else-if="['combox'].includes(item.type)">
              <uni-combox v-model="params[item.key]" v-bind="item.props || {}" @input="onChange(item)"></uni-combox>
            </template>
            <template v-else-if="['datetime-picker'].includes(item.type)">
              <uni-datetime-picker v-model="params[item.key]" v-bind="item.props || {}" @change="onChange(item)" />
            </template>
            <template v-else-if="['data-checkbox'].includes(item.type)">
              <uni-data-checkbox v-model="params[item.key]" v-bind="item.props || {}" @change="onChange(item)" />
            </template>
            <template v-else-if="['slot'].includes(item.type)">
              <slot :name="item.slotName || item.key" :data="params" :item="item"></slot>
            </template>
            <component v-else :is="`uni-${item.type}`" v-model="params[item.key]" v-bind="item.props || {}" @change="onChange(item)"></component>
          </uni-forms-item>
        </template>
        <slot name="opt">
          <view class="form_opt">
            <button @click="goClear">{{ $t('common.reset') }}</button>
            <button type="primary" @click="goSubmit">{{ $t('common.submit') }}</button>
          </view>
        </slot>
		</uni-forms>
  </div>

</template>
<script>
export default {
	name: 'me-form',
  props:{
    value:{
      type:Object,
      default:()=>{}
    },
    props:{
      type:Object,
      default:()=>{}
    },
    columns:{
      type:Array,
      default:()=>[]
    }
  },
  emits:['change','submit'],
	data() {
		return {
      params:{},
			currentRoute: ''
		};
	},
  computed: {
    formRef(){
      return this.props.ref || 'uniForm'
    },
    propsData () {
      return this.value
    }
  },
  watch:{
    propsData:{
      handler(newValue, oldValue) {
        this.params = Object.assign({},newValue)
      },
      deep: true,
      immediate:true
    }
  },
  methods: {
    getItem(key){
      return this.columns.find((item)=>item.key === key)
    },
    async goSubmit(){
      try {
        await this.validate()
        this.$emit('submit',this.params)
      } catch (error) {
        console.log('err', error);
      }
    },
    goClear(){
      this.clearValidate()
      this.columns.map((item)=>{
        if(!item.show || item.show(this.params)){
          if(this.params[item.key] || this.params[item.key]===0){
            delete this.params[item.key]
          }
        }
      })
      this.onChange()
    },
    validate () {
      return this.$refs[this.formRef].validate()
    },
    clearValidate(){
      return this.$refs[this.formRef].clearValidate()
    },
    onChange (item = undefined) {
      item && item.change && item.change(this.params[item.key],item)
      this.$emit('input',this.params)
      this.$emit('change',this.params)
    }
  }
}
</script>
<style lang="scss" scoped>
.form_opt{
  display: flex;
  align-items: center;
  button{
    flex: 1;
    &+button{
      margin-left: 20px;
    }
  }

}
</style>